<template>
  <div class="product">
    <!-- 横幅开始 -->
    <div class="jingpin">
      <img src="../assets/0-1.jpg" />
    </div>
    <!-- 横幅结束 -->
    <!-- 产品中心开始 -->
    <div class="conten">
      <h5>当前位置：首页>>产品中心>>{{ title }}</h5>
      <div class="top">
        <div class="liebiao">
          <div class="navse">
            <ul>
              <li
                v-for="(item, index) in shopnav"
                :key="index"
                :class="{ active: navIndex === index }"
                @click="selShopNav(item, index)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="navxe">
            <h3>联系我们</h3>
            <p>热线电话： 029-87781419</p>
            <p>手机：13038588710</p>
            <p>地址：北二环西端10号</p>
            <p>金泰财富中心A座505</p>
          </div>
        </div>
        <div class="listbox" v-show="!showdetailFlag">
          <div class="pro1">
            <ul>
              <li
                v-for="(item, index) in shopList"
                :key="index"
              >
              <!-- @mouseleave="mouseLeave(index)" -->
                <div class="item">
                  <em class="cc">{{ item.title }}</em>
                  <b>
                    <img class="aa" src="../assets/shuibeng.png" />
                    <img class="bb" src="../assets/shuibeng.png" />
                  </b>
                  <!-- <p>
                    <em>
                      {{ item.description || '内容无' }}
                    </em>
                    <strong>查看详情</strong>
                  </p> -->
                </div>
                <div class="cur" v-show="item.flag">
                  <em class="cc">立式多级消防泵</em>
                  <b>
                    <img class="aa" src="../assets/shuibeng.png" />
                    <img class="bb" src="../assets/shuibeng.png" />
                  </b>
                  <p>
                    <em>
                      {{ item.description || '内容无' }}
                    </em>
                    <strong @click="goshopDetail(item.id)">查看详情</strong>
                  </p>
                </div>
              </li>
              <p v-if="shopList.length < 1" style="text-align:center">暂无数据</p>
            </ul>
            <div class="clear"></div>
          </div>
        </div>
        <!-- 侧边栏结束 -->
        <!-- 详情开始 -->
        <div class="xiangqing" v-show="showdetailFlag">
          <div class="lishi">
            <div class="tu">
              <img src="../assets/1-2.jpg" />
            </div>
            <div class="zixun">
              <h2>{{shopDetail.title}}</h2>
              <div class="text">
                <p>
                  XBD-L
                  型单级消防泵系立式单吸消防泵，供输送不含固体颗粒的清水及物理化学性质类似于水的液体之用。主要用于消防系统增压送水，也可用于厂矿给排水。输送液体的流量范围为5~80L/S，压力范围为
                  0.2~2.25Mpa,配套功率范围为1.5~200KW,口径范围为&50~&200mm。
                  {{shopDetail.description}}
                </p>
                <span>立即咨询</span>
              </div>

              <div class="tupian" style="position: relative">
                <swiper ref="swiper1" class="swiper" :options="swiperOption1">
                  <div class="swiper-slide">
                    <img src="../assets/1-1.jpg" alt />
                  </div>
                  <div class="swiper-slide">
                    <img src="../assets/1-1.jpg" alt />
                  </div>
                  <div class="swiper-slide">
                    <img src="../assets/1-1.jpg" alt />
                  </div>
                  <div class="swiper-slide">
                    <img src="../assets/1-1.jpg" alt />
                  </div>
                  <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
                <!-- <div
                  class="swiper-button-prev"
                  slot="button-prev"
                  @click="prev"
                ></div>
                <div
                  class="swiper-button-next"
                  slot="button-next"
                  @click="next"
                ></div> -->
              </div>
            </div>
          </div>
          <div class="introduce">
            <img src="../assets/124.jpg" />
          </div>
        </div>
      </div>
      <!-- 详情结束 -->
      <div class="tuijian">
        <div class="wen">
          <h5>产品推荐</h5>
        </div>
        <div class="chanp">
          <div class="wenen" style="position: relative">
            <swiper ref="swiper" class="swiper" :options="swiperOption">
              <div class="swiper-slide">
                <img src="../assets/1-1-1.jpg" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/1-2-3.jpg" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/1-2-1.jpg" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/1-2-3.jpg" alt />
              </div>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <div
            class="swiper-button-prev"
            slot="button-prev"
            @click="prev"
          ></div>
          <div
            class="swiper-button-next"
            slot="button-next"
            @click="next"
          ></div>
        </div>
      </div>
    </div>
    <!-- 产品中心结束 -->
  </div>
</template>

<script>
import Swiper from "swiper";
// import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// import "swiper/swiper-bundle.css";
// import 'swiper/css/swiper.css'

export default {
  // components: {
  //   Swiper,
  //   SwiperSlide,
  // },
  data() {
    return {
      navIndex: 0,
      title: "消防水泵系列",
      shopnav: [], // 商品分类
      swiperOption: {
        notNextTick: false,
        slidesPerView: 3,
        spaceBetween: 40,
        loop: true,
        autoplay: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperOption1: {
        notNextTick: false,
        slidesPerView: 3,
        spaceBetween: 40,
        loop: true,
        autoplay: true,
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },
      },
      page: 1,
      shopList: [],
      showdetailFlag: false, // 展示详情
      shopDetail: {}, // 商品详情
    };
  },
  created() {
    //跳转到顶部
    window.scrollTo(0, 0)
    console.log(this.$route.query.num);
    if (this.$route.query.num) this.navIndex = +this.$route.query.num;
    console.log('产品', this.navIndex);
    if (
      navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
    ) {
      this.$router.push("/page/home_mobile");
    }
  },
  mounted() {
    var swiper = new Swiper(".swiper-container", {
      pagination: ".swiper-pagination",
      slidesPerView: 3,
      paginationClickable: true,
      spaceBetween: 40,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    this.getShopClass();
  },
  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    '$route'(to,from) {
        //做一些路由变化的响应
        /** 初始化其他数据 */
        // let pid = this.$route.query.num;
        this.navIndex = +this.$route.query.num || 0
        console.log('产品', this.navIndex);
        this.shopid = this.shopnav[this.navIndex].id
        this.getShopList()
        // if(pid){
        //     this.initOther(pid);
        // }
    },
  },
  methods: {
    selShopNav(data, i) {
      this.showdetailFlag = false
      // 切换分类
      this.navIndex = i;
      this.title = data.name;
      this.shopid = data.id;
      this.getShopList() // 商品对应列表
    },
    getShopClass() { // 商品分类
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/index")
        .then((res) => {
          console.log("商品分类", res.data.result);
          this.shopnav = res.data.result;
          this.shopid = this.shopnav[0].id;
          this.getShopList()
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getShopList() { // 商品列表
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/indexs?id="+this.shopid+"&page="+this.page+"&limit=")
        .then((res) => {
          console.log("商品列表", res.data.result);
          this.shopList = res.data.result.data;
          if (this.shopList.length > 0) {
            for (const item of this.shopList) {
              item.flag = false
            }
            this.shopList[0].flag = true
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getShopDetail(id) { // 商品详情
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/index_info?id="+id)
        .then((res) => {
          console.log("商品详情", res.data.result);
          this.showdetailFlag = true
          this.shopDetail = res.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goshopDetail(id) {
      this.getShopDetail(id)
    },
    mouseOver(i) {
      for (const item of this.shopList) {
        item.flag = false;
      }
      this.shopList[i].flag = true;
      this.$forceUpdate();
    },
    prev() {
      this.$refs.swiper.$swiper.slidePrev();
    },
    next() {
      this.$refs.swiper.$swiper.slideNext();
    },
  },
  destroyed () {
    console.log('***')
  }
};
</script>

<style scoped>
/* 横幅 */
.jingpin img {
  width: 100%;
  min-width: 1200px;
}
/* 横幅结束 */
/* 产品中心 */
/* 产品中心 */
/* 内容开始 */
.conten {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
/* 侧边栏开始 */
.liebiao {
  width: 300px;
  margin-top: 1em;
  float: left;
  overflow: hidden;
}
.navse li {
  font-size: 20px;
  padding: 10px;
  background: darkgray;
  border: 0;
  margin: 5px;
  text-align: center;
}
.navse a:link,
.navse a:visited {
  text-decoration: none;
  font-size: 20px;
  color: #ffffff;
}
.navse li:hover {
  text-decoration: none;
  font-size: 20px;
  color: #ffffff;
  background-color: #0061ae;
}
.navse .active {
  text-decoration: none;
  font-size: 20px;
  color: #ffffff;
  background-color: #0061ae;
}
.navxe {
  width: 290px;
  height: 200px;
  margin-top: 2em;
  border-style: solid;
  border-width: 1px;
  margin-left: 5px;
}
.navxe h3 {
  text-align: center;
  margin-top: 1em;
}
.navxe p {
  text-align: center;
  padding: 1px;
  margin-top: 10px;
}
/* 侧边栏结束 */
/* 详情开始 */
.xiangqing {
  width: 890px;
  float: right;
  overflow: hidden;
  margin-top: 20px;
}
.tu img {
  width: 340px;
}
.tu {
  float: left;
  overflow: hidden;
}
.tupian img {
  width: 110px;
  float: left;
  margin-top: 10px;
}
.zixun {
  width: 390px;
  padding: 10px;
  overflow: hidden;
}
.zixun h2 {
  font-weight: bold;
  font-size: 22px;
  color: steelblue;
}
.text {
  border-top: 2px solid steelblue;
  border-bottom: 2px solid steelblue;
}
.text p {
  font-size: 13px;
  margin-top: 10px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.text span {
  display: block;
  width: 50px;
  font-size: 10px;
  color: #fff;
  padding: 3px 20px;
  background: #d6af62;
  border: 0;
  border-radius: 20px;
  margin-bottom: 3em;
}

.introduce img {
  width: 730px;
}

/* 详情结束 */
/* 产品推荐开始 */
.tuijian {
  width: 1200px;
  margin: 0 auto;
  height: 250px;
  margin-top: 10px;
  overflow: hidden;
}
.wen {
  border-left: 3px solid #333;
}
.wen h5 {
  margin-left: 15px;
  margin-bottom: 15px;
}
.chanp {
  border-top: 1px solid #333;
  width: 1200px;
  position: relative;
}
.wenen {
  width: 1000px;
}
.wenen img {
  width: 300px;
  margin-top: 20px;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-button-prev {
  position: absolute;
  top: 10%;
  left: 83.5%;
  background: steelblue;
  color: #fff;
  width: 60px;
  height: 185px;
  overflow: hidden;
  margin-top: 0;
}
.swiper-button-next {
  position: absolute;
  top: 10%;
  right: 6%;
  background: #d6af62;
  color:#fff;
  width: 60px;
  height: 185px;
  overflow: hidden;
  margin-top: 0;
}

/* 产品推荐结束 */

/* 商品开始 */
.pro1 {
  width: 895px;
  float: left;
}
.pro1 ul li {
  float: left;
  /* width: 178px; */
  position: relative;
  height: 273px;
  background-image: -moz-linear-gradient(left, #eeeeee, #e2e2e2);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pro1 ul li em {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  top: 33px;
  font-size: 16px;
  color: #000;
  font-style: normal;
  text-align: center;
  box-sizing: border-box;
  padding: 0 7%;
}
.pro1 ul li .cc {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  top: 240px;
  font-size: 16px;
  color: #000;
  font-style: normal;
  text-align: center;
  box-sizing: border-box;
  padding: 0 7%;
}
.pro1 ul li em span {
  display: block;
  font-size: 14px;
  padding-top: 11px;
  line-height: 100%;
}
.pro1 ul li p {
  display: none;
}
.pro1 ul li b .bb {
  display: inline-block;
  position: absolute;
  bottom: 41px;
  margin-left: 26px;
  left: 0;
}
.pro1 ul li b .aa {
  display: none;
}
.item {
  width: 178px;
  height: 100%;
  float: left;
  position: relative;
}
.pro1 ul li .cur {
  float: left;
  background: #0061ae;
  width: 348px;
  height: 273px;
}
.pro1 ul li .cur em {
  display: none;
}
.pro1 ul li .cur b .aa {
  display: inline-block;
  position: absolute;
  top: 41px;
  right: 35px;
  display: block;
}
.pro1 ul li .cur b .bb {
  display: none;
}
.pro1 ul li .cur p {
  color: #fff;
  position: absolute;
  text-align: left;
  top: 4px;
  width: 100%;
  display: block;
}
.pro1 ul li .cur p em {
  display: block;
  width: 192px;
  height: 122px;
  line-height: 18px;
  font-size: 12px;
  font-style: normal;
  color: #fff;
  text-align: left;
}
.cur p em span {
  display: block;
}
.cur p strong {
  display: block;
  width: 57px;
  height: 19px;
  border-radius: 39px;
  border: 1px solid #fff;
  text-align: center;
  line-height: 19px;
  font-weight: normal;
  font-size: 12px;
  position: absolute;
  left: 35px;
  top: 178px;
}
/* 商品1结束 */
</style>